<template>
  <div>
    <!-- 视频 -->
    <div class="video">
        <div class="header">
            <div class="box">
                <div class="imgs"><img src="../assets/imgs/头像.jpg" alt=""></div>
                <div class="wenzi">1条新消息</div>
                <span>&gt;</span>
            </div>
        </div>
        <div class="ship" style="margin-top: 12px;">
            <div class="top" style="display: flex;justify-content: space-between;margin-left:17px;">
                <div class="wenzi" style="color: #000; font-size:16px;">关注的直播</div>
                <div class="all" style="margin-right:17px;">全部动态&gt;</div>
            </div>
            <div class="shiplb">
                <div class="items" style="position: relative;overflow: hidden;">
                    <div class="imgs"><img src="../assets/videoimgs/ds.jpg" alt="" style="width: 100%; "></div>
                    <div class="dingwei" style="width: 58px;height: 16px; position: absolute; top: 0px;"><img src="../assets/imgs/直播中.gif" alt=""></div>
                    <div class="shangjia" style="display: flex;align-items: center;justify-content: space-around;">
                        <div class="imgs" style="width: 30px;height: 30px;"><img src="../assets/imgs/shiplogo.webp" alt="" style="width: 100%;border-radius: 50%;"></div>
                        <div class="wenzi" style="color: #fff;font-size: 12px;">框架饰品店</div>
                    </div>
                </div>
            </div>
            <div class="ooo"></div>
        </div>
        <div class="ooo"></div>
        <!-- 切换视图 -->
        <van-tabs class="toplist">
            <van-tab
              v-for="item in welflistsL"
              :title="item"
              :key="item"
              class="index"
              >
              <div v-if="item=='推荐'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists1[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='财宝'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists2[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='蔬菜'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists3[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='肉类'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists4[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='数码'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists5[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='运动'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists6[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='打折'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists7[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>
              <div v-if="item=='汽车'">
                <div class="videos">
                    <div class="items"    v-for="(item,index) in boxlists8[0]" :key="index">
                        <div class="imgs">
                            <img :src="item" alt="">
                        </div>
                        <div class="imgs2">
                            <img src="../assets/imgs/直播中.gif" alt="">
                            </div>
                            <div class="hmn">66.6万次观看</div>
                        <div class="huikui">真实福利回馈粉丝</div>
                    </div>
                </div>
              </div>         
           
            </van-tab>
       </van-tabs>
        <div class="videoooo"></div>
    </div>

    <!-- 切换 -->
     <div class="dibu">
        <router-link tag="a" to="/home" class="items">
            <img src="../assets/imgs/白首页.webp" alt="">
            <p>首页</p>
        </router-link>
        <router-link tag="a" to="/video" class="items">
            <img src="../assets/imgs/直播.webp" alt="">
            <p>直播</p>
        </router-link>
        <router-link tag="a" to="/newsele" class="items">
            <img src="../assets/imgs/分类.webp" alt="">
            <p>分类</p>
        </router-link>
        <router-link tag="a" to="/talk" class="items">
            <img src="../assets/imgs/聊天.webp" alt="">
            <p>聊天</p>
        </router-link>
        <router-link tag="a" to="/person" class="items">
            <img src="../assets/imgs/个人中心.webp" alt="">
            <p>个人中心</p>
        </router-link>
    </div>
   
  </div>
</template>

<script>
export default {
    data(){
        return {
            activeName:"",
            welflistsL:['推荐','财宝','蔬菜','肉类','数码','运动','打折','汽车'],
            boxlists1:[
                {
                    boxtps1:require("../assets/videoimgs/01.jpg"),
                    boxtps2:require("../assets/videoimgs/01.jpg"),
                    boxtps3:require("../assets/videoimgs/01.jpg"),
                    boxtps4:require("../assets/videoimgs/01.jpg"),
                    boxtps5:require("../assets/videoimgs/01.jpg"),
                    boxtps6:require("../assets/videoimgs/01.jpg"),
                    boxtps7:require("../assets/videoimgs/01.jpg"),
                    boxtps8:require("../assets/videoimgs/01.jpg"),
                }
            ],
            boxlists2:[
                {
                    boxtps1:require("../assets/videoimgs/02.jpg"),
                    boxtps2:require("../assets/videoimgs/02.jpg"),
                    boxtps3:require("../assets/videoimgs/02.jpg"),
                    boxtps4:require("../assets/videoimgs/02.jpg"),
                    boxtps5:require("../assets/videoimgs/02.jpg"),
                    boxtps6:require("../assets/videoimgs/02.jpg"),
                    boxtps7:require("../assets/videoimgs/02.jpg"),
                    boxtps8:require("../assets/videoimgs/02.jpg"),
                }
            ],
            boxlists3:[
                {
                    boxtps1:require("../assets/videoimgs/03.jpg"),
                    boxtps2:require("../assets/videoimgs/03.jpg"),
                    boxtps3:require("../assets/videoimgs/03.jpg"),
                    boxtps4:require("../assets/videoimgs/03.jpg"),
                    boxtps5:require("../assets/videoimgs/03.jpg"),
                    boxtps6:require("../assets/videoimgs/03.jpg"),
                    boxtps7:require("../assets/videoimgs/03.jpg"),
                    boxtps8:require("../assets/videoimgs/03.jpg"),
                }
            ],
            boxlists4:[
                {
                    boxtps1:require("../assets/videoimgs/04.jpg"),
                    boxtps2:require("../assets/videoimgs/04.jpg"),
                    boxtps3:require("../assets/videoimgs/04.jpg"),
                    boxtps4:require("../assets/videoimgs/04.jpg"),
                    boxtps5:require("../assets/videoimgs/04.jpg"),
                    boxtps6:require("../assets/videoimgs/04.jpg"),
                    boxtps7:require("../assets/videoimgs/04.jpg"),
                    boxtps8:require("../assets/videoimgs/04.jpg"),
                }
            ],
            boxlists5:[
                {
                    boxtps1:require("../assets/videoimgs/05.jpg"),
                    boxtps2:require("../assets/videoimgs/05.jpg"),
                    boxtps3:require("../assets/videoimgs/05.jpg"),
                    boxtps4:require("../assets/videoimgs/05.jpg"),
                    boxtps5:require("../assets/videoimgs/05.jpg"),
                    boxtps6:require("../assets/videoimgs/05.jpg"),
                    boxtps7:require("../assets/videoimgs/05.jpg"),
                    boxtps8:require("../assets/videoimgs/05.jpg"),
                }
            ],
            boxlists6:[
                {
                    boxtps1:require("../assets/videoimgs/06.jpg"),
                    boxtps2:require("../assets/videoimgs/06.jpg"),
                    boxtps3:require("../assets/videoimgs/06.jpg"),
                    boxtps4:require("../assets/videoimgs/06.jpg"),
                    boxtps5:require("../assets/videoimgs/06.jpg"),
                    boxtps6:require("../assets/videoimgs/06.jpg"),
                    boxtps7:require("../assets/videoimgs/06.jpg"),
                    boxtps8:require("../assets/videoimgs/06.jpg"),
                }
            ],
            boxlists7:[
                {
                    boxtps1:require("../assets/videoimgs/02.jpg"),
                    boxtps2:require("../assets/videoimgs/02.jpg"),
                    boxtps3:require("../assets/videoimgs/02.jpg"),
                    boxtps4:require("../assets/videoimgs/02.jpg"),
                    boxtps5:require("../assets/videoimgs/02.jpg"),
                    boxtps6:require("../assets/videoimgs/02.jpg"),
                    boxtps7:require("../assets/videoimgs/02.jpg"),
                    boxtps8:require("../assets/videoimgs/02.jpg"),
                }
            ],
            boxlists8:[
                {
                    boxtps1:require("../assets/videoimgs/04.jpg"),
                    boxtps2:require("../assets/videoimgs/04.jpg"),
                    boxtps3:require("../assets/videoimgs/04.jpg"),
                    boxtps4:require("../assets/videoimgs/04.jpg"),
                    boxtps5:require("../assets/videoimgs/04.jpg"),
                    boxtps6:require("../assets/videoimgs/04.jpg"),
                    boxtps7:require("../assets/videoimgs/04.jpg"),
                    boxtps8:require("../assets/videoimgs/04.jpg"),
                }
            ],
        }
    },
    methods:{

    }
}
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.video  .titles {
  width: 94%;
  margin: 0 auto;
  height: 25px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #000;
}
.video  .titles .title.con{
    border-bottom: 2px solid red;
}
.videoooo{
    width: 100%;
    height: 90px;
}
img{
    width: 100%;
}
.video{
    width: 92%;
}
.video .header{
    width: 96%;
    height: 68px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}
.video .header .box{
    width: 136px;
    height: 36px;
    border-radius: 18px;
    background-color: #585858;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 14px;
    color: #fff;
}
.video .header .box .imgs{
    width: 28px;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
}
.video .header .box .imgs img{
    width: 100%;
}
.ship{
    width: 100%;
    height: 183px;
}
.shiplb{
    width: 100%;
    height: 155px;
}
.shiplb .items{
    width: 104px;
    height: 155px;
    margin-left: 17px;
}
.shangjia{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0px;
    line-height: 40px;
}
.manyspheader ul{
    width: 100%;
}
.manyspheader ul li.con{
    color: red;

}
.videos{
    width: 100%;
    margin-left: 17px;
    display: flex;
    flex-wrap: wrap;
    
}
.videos .items{
    flex: 1;
    position: relative;
    margin-top: 5px;
}
.videos .imgs{
    width: 172px;
    height: 258px;
}
.videos .imgs img{
    width: 172px;
    height: 258px;
}
.videos .imgs2{
    width: 58px;
    height: 16px;
    position: absolute;
    top: 0px;
}
.videos .hmn{
    width: 75px;
    height: 16px;
    position: absolute;
    top: 0px;
    left: 58px;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 12px;
}
.videos .huikui{
    position: absolute;
    bottom: 5px;
    height: 20px;
    width: 100%;
    color: #fff;
    font-size: 14px;
    left: 5px;
    font-weight: 500;
}
</style>